<template>
    <article class="article-box el-pd-20">
        <div class="el-box-init el-bkgd-white el-mx-1000 el-pd-20">
            <!-- 横幅 -->
            <div class="banner-section">
                <Banner banner="banner8" />
                <div class="text-box">
                    <h2 class="dynamic-down-line">{{ article.list.title }}</h2>
                </div>
            </div>

            <div class="content-box el-mx-800">
                <blog-meta :list="article.list" />

                <div
                    class="article-details"
                    v-html="article.list.content"
                ></div>
            </div>
        </div>

        <div
            class="
                comment-container
                el-box-init el-bkgd-white el-mx-1000 el-pd-20
            "
        >
            <div class="comment-input-box">
                <Avatar :url="userInfo.avatar" width="50px" height="50px" />
                <!-- <comment ref="commentRef" @saveComment="onSubmit"></comment> -->
                <new-emojis ref="commentRef" @input="getContent">
                    <el-button
                        type="primary"
                        round
                        size="small"
                        @click="onSubmit(1)"
                    >
                        发表评论
                    </el-button>
                </new-emojis>
            </div>
            <div class="comment-list">
                <comment-item
                    v-for="(item, index) in comments.list"
                    :key="item.id"
                    :comment="item"
                    :floor="index"
                    @onClick="showReply"
                >
                    <new-emojis
                        :ref="`commentRef${item.id}`"
                        v-show="item.id == isShow ? true : false"
                        @input="getContent"
                    >
                        <el-button round size="small" @click="handleCancel">
                            取消
                        </el-button>
                        <el-button
                            type="primary"
                            round
                            size="small"
                            @click="onSubmit(2)"
                        >
                            回复
                        </el-button>
                    </new-emojis>
                    <!-- <comment
                        v-show="item.id == isShow ? true : false"
                        class="el-mg-20"
                        :cancel="true"
                        :level="2"
                        :ref="`commentRef${item.id}`"
                        :placeholder="'回复' + placeholder"
                        @onClick="cancelReply"
                        @saveComment="onSubmit"
                    ></comment> -->
                </comment-item>
            </div>
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="comments.currentPage"
                :page-sizes="comments.pageSizes"
                :page-size="comments.pageSize"
                :layout="comments.layout"
                :total="comments.total"
            >
            </el-pagination>
        </div>
    </article>
</template>

<script>
import { blog as Api } from "../../api";

export default {
    data() {
        return {
            isShow: "",
            comment_id: "",
            placeholder: "", // 占位符

            content: "", // 评论/回复内容

            article: {
                list: [],
            },

            comments: {
                list: [], // 列表
                currentPage: this.$localConfig.pagination.currentPage, // 默认从第一页开始
                pageSizes: this.$localConfig.pagination.pageSizes, // 每页多少条
                pageSize: this.$localConfig.pagination.pageSize, // 每页显示个数下拉选择器的选项设置
                layout: this.$localConfig.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: 0, // 总数
            },
        };
    },
    async asyncData({ app: { $axios, $localConfig }, params, query }) {
        let data = {
            id: params.id,
            per_page: $localConfig.pagination.pageSize,
            page: Number(
                typeof query.page == "undefined"
                    ? $localConfig.pagination.currentPage
                    : query.page
            ),
        };

        const [articleDetail] = await Promise.all([
            $axios.$get(Api.getArticleDetail, { params: data }),
        ]);

        const articleData = articleDetail.data;

        return {
            article: {
                list: articleData.list,
            },
        };
    },
    mounted() {
        this.getComments();
        if (window.name == "") {
            console.log("首次被加载");
            // 在首次进入页面时我们给window.name设置一个固定值(isRefresh)
            window.name = "isRefresh";
            this.handleClick();
        } else if (window.name == "isRefresh") {
            console.log("页面被刷新");
        }
    },
    methods: {
        // 获取评论列表
        async getComments() {
            let params = {
                id: this.$route.params.id,
                per_page: this.comments.pageSize,
                page: this.comments.currentPage,
            };

            const { code, msg, data } = await this.$axios.$get(
                Api.commentList,
                { params }
            );

            if (code == 200) {
                this.comments.list = data.list;
                this.comments.total = data.total;
            }
        },
        /* 记录文章阅读数 */
        async handleClick() {
            let id = this.$route.params.id;
            await this.$axios.$get(Api.clickRecord, { params: { id } });
        },

        // 获取回复内容
        getContent(value) {
            this.content = value;
        },

        /* 打开回复编辑框 */
        showReply(data) {
            this.isShow = data.parent.id;
            this.comment_id = data.child ? data.child.id : data.parent.id;
            this.placeholder = data.child
                ? data.child.user_name
                : data.parent.user_name;
        },

        /* 关闭清空编辑框 */
        handleCancel() {
            if (this.isShow) {
                this.$refs[`commentRef${this.isShow}`][0].textarea = "";
            } else {
                this.$refs["commentRef"].textarea = "";
            }
            this.isShow = "";
        },

        /* 提交 */
        async onSubmit(level) {
            let routeParam = this.$route.params;
            let api = Api.comment;
            let params = {
                content: this.content,
                comment_level: level,
                article_id: Number(
                    typeof routeParam.id != "undefined" ? routeParam.id : 0
                ),
            };
            if (level == 2) {
                params.id = this.comment_id;
                api = Api.reply;
            }

            const { code, data, msg } = await this.$axios.$post(api, params);

            if (code == 200) {
                this.$msg.success(msg);
                this.handleCancel();
                this.getComments();
            } else {
                this.$msg.error(msg);
            }
        },

        handleCurrentChange(val) {
            this.$router.push({
                path: "/blog/" + this.$route.params.id,
                query: {
                    page: val,
                },
            });
        },
    },
    destroyed() {
        window.name = "";
    },
    computed: {
        userInfo() {
            return this.$store.state.userInfo;
        },
    },
    // 监听路由
    watchQuery: ["page"],
};
</script>

<style lang="less" scoped>
.banner-section {
    /deep/img {
        border-radius: 5px;
        box-shadow: 0px 5px 25px #000;
    }
    .text-box {
        h2 {
            font-size: 24px;
            color: #fff;
            padding-bottom: 5px;
        }
    }
}

.content-box {
    margin-top: 30px;

    .article-details {
        margin-top: 20px;
        color: #606f7b;
    }
}

.comment-container {
    margin: 20px auto;

    .comment-input-box {
        .avatar {
            margin-right: 15px;
        }
        display: flex;
    }
}
</style>